<template>
  <div class="list_container flex both-100">
    <div class="back-box flex-reverse marginb-15">
      <div class="back flex">
        <el-button class="btn_primary" @click="clickBack"> <i class="iconfontShuzhi icon-fanhui"></i>返回</el-button>
      </div>
    </div>
    <Breadcrumb title="应急处理" />
    <div class="content_container flex both-100">
      <div class="details-container flex both-100">
        <div class="left-wrapper content-wrapper flex">
          <div class="content-item basic-info">
            <custom-title title="基本信息"></custom-title>
            <div class="content-item__body">
              <el-skeleton :rows="6" :loading="descLoading" :throttle="100">
                <base-descriptions :descConfig="descConfig" :descConfigItem="descConfigItem" :descModel="descModel">
                  <template slot="alaramLv" slot-scope="slotProps">
                    <div class="span">
                      {{ descModel[slotProps.scope.fieIdName] }}
                      <span class="urency-tag" :class="formatUrgency(descModel.alarmUrgency)"></span>
                    </div>
                  </template>
                </base-descriptions>
              </el-skeleton>
              <base-table :tableModel="reasonDeviceList" :tableItemConfig="reasonDeviceListConfig" stripe v-loading="reasonDeviceListLoading" />
            </div>
          </div>
          <div class="content-item emergency-wisdom">
            <custom-title title="应急指挥"></custom-title>
            <div class="wisdom-content__body">
              <div class="nav">
                <ul>
                  <li :class="currentNavItem === item.component ? 'item-active' : ''" v-for="item in navList" :key="item.icon" @click="clickNavItem(item)">
                    <span :class="currentNavItem === item.component ? 'icon-' + item.icon + '-active' : 'icon-' + item.icon"></span>
                    <span class="item-title"> {{item.name}} </span>
                  </li>
                </ul>
              </div>
              <div class="wrapper">
                <transition name="tab" mode="out-in">
                  <keep-alive>
                    <component :is="currentNavItem" v-model="alarmId" />
                  </keep-alive>
                </transition>
              </div>
              <!-- <component :is="'alarm-images'" :value="value" /> -->
            </div>
          </div>
        </div>
        <div class="right-wrapper content-wrapper flex">
          <div class="content-item rela-time-video">
            <custom-title title="实时监控"></custom-title>
            <div class="content-item__body">
              <!-- <div class="img-container alarm-plane">
                <img src="@/assets/images/video.png" class="image" fit="fill" lazy/>
                <div class="img-contaienr__footer"></div>
              </div> -->
            </div>
          </div>
          <div class="content-item alarm-elevance">
            <custom-title title="告警处理"></custom-title>
            <custom-form :formModel="alarmReasonModel" :formItemConfig="alarmReasonModelConfig" />
            <div class="btn-wrapper">
              <el-button class="btn_primary" @click="clickRepace" v-if="alarmReasonModel.alarmStatus !== '5'">保存</el-button>
              <el-button class="btn_ghost__danger" @click="clickRepace" v-else>结束警情</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
import { getAlarmDetail, getProjectPointControl, getReasonDevice, getDicts, updateAlarm } from '@/api'
import { formatUrgency } from '@/utils/filters'
import FireFighingMap from './FireFighingMap'
import PlaneGraph from './PlaneGraph'
import AlarmImage from './AlarmImage'
import OperationRecord from './OperationRecord'
import ContactPerson from './ContactPerson'
export default {
  name: 'alarmEmergency',
  data () {
    return {
      // 描述配置
      descConfig: {
        size: 'medium',
        column: '2',
      },
      // 详情页数据
      descModel: {},
      // 详情页配置项
      descConfigItem: [
        {
          fieIdName: 'projectPointName',
          label: '项目点位',
          span: '3',
          slotName: 'alaramLv'
        },
        {
          fieIdName: 'projectAddress',
          label: '平面图',
          span: '3'
        },
        {
          fieIdName: 'projectDirector',
          label: '联系人',
          span: '2'
        },
        {
          fieIdName: 'directorPhone',
          label: '联系电话',
          span: '2'
        },
        {
          fieIdName: 'happenTime',
          label: '告警时间',
          span: '3'
        },
        {
          fieIdName: 'handleTime"',
          label: '处理时间',
          span: '2'
        },
        {
          filIdName: 'handleUserName',
          label: '处理人',
          span: '2'
        },
        {
          fieIdName: 'alarmReason',
          label: '告警位置',
          span: '2'
        }
      ],
      // 告警详情
      alarmDetail: {},
      // 详情加载状态
      descLoading: false,
      // 关联设备搜索条件
      searchDeviceMap: {
        associationStatus: 1,
        deviceId: undefined,
        deviceTypeId: undefined
      },
      // 告警关联设备
      reasonDeviceList: [],
      // 告警关联设备表格配置
      reasonDeviceListConfig: [
        {
          prop: 'createTime',
          label: '告警时间'
        },
        {
          prop: 'deviceClassifyId',
          label: '设备编号'
        },
        {
          prop: 'installPosition',
          label: '告警位置'
        },
        {
          prop: 'remark',
          label: '告警内容'
        }
      ],
      // 告警关联设备加载状态
      reasonDeviceListLoading: false,
      //
      alarmReasonModel: {
        alarmId: '',
        alarmStatus: 0,
        alarmType: 0,
        handleAlarmReason: [],
        handleContent: 'undefined'
      },
      //
      alarmReasonModelConfig: [
        {
          label: '告警原因',
          prop: 'handleAlarmReason',
          component: 'BaseCheckboxGroup',
          isButton: 'true',
          options: [],
          span: 24,
        },
        {
          label: '备注信息',
          prop: 'handleContent',
          span: 24,
          type: 'textarea'
        },
        {
          label: '告警分类',
          prop: 'alarmType',
          component: 'BaseRadioGroup',
          isButton: 'true',
          options: [],
          span: 24,
        },
        {
          label: '处理结果',
          prop: 'alarmStatus',
          component: 'BaseRadioGroup',
          span: 24,
          clearable: true,
          width: '100%',
          isButton: 'true',
          options: [],
          placeholder: '请输入用户名',
        },
      ],
      // navlist
      navList: [
        {
          name: '消防地图',
          component: 'FireFighingMap',
          icon: 'map'
        },
        {
          name: '平面图',
          component: 'PlaneGraph',
          icon: 'plane'
        },
        {
          name: '告警图像',
          component: 'AlarmImage',
          icon: 'alarm'
        },
        {
          name: '操作日志',
          component: 'OperationRecord',
          icon: 'log'
        },
        {
          name: '联系人',
          component: 'ContactPerson',
          icon: 'contact'
        },
      ],
      currentNavItem: 'FireFighingMap',
      alarmId: undefined
    }
  },
  watch: {
  },
  created () {
    this.getDetails()
    this.getOption()
  },
  methods: {
    // 初始化数据
    /**
     *  @param {string} alarmId - 报警的唯一标识ID。
     */
    async getDetails () {
      this.descLoading = true
      const id = this.$route.query.alarmId
      const alarmDetail = await getAlarmDetail(id)
      const pointDetail = await getProjectPointControl(alarmDetail.data.projectPointId)
      const { alarmId, alarmStatus, alarmType, handleAlarmReason, handleContent } = alarmDetail.data;
      this.alarmReasonModel = {
        alarmId,
        alarmStatus,
        alarmType,
        handleAlarmReason: Array.isArray(handleAlarmReason) ? handleAlarmReason : [],
        handleContent
      }
      this.alarmDetail = alarmDetail
      this.listAssociaTionDevice()
      this.generateDesModel(alarmDetail, pointDetail)
      this.alarmId = id
    },
    /**
     * @param {Object} alarmDetail - 报警的详细信息。
     * @param {Object} pointDetail - 项目点的详细控制信息。
     */
    generateDesModel (alarmDetail, pointDetail) {
      const mergeDetail = Object.assign({}, alarmDetail.data, pointDetail.data)
      this.descLoading = false
      this.descModel = mergeDetail
    },
    /**查询关联设备 */
    listAssociaTionDevice () {
      this.searchDeviceMap.deviceId = this.alarmDetail.data.deviceId
      this.searchDeviceMap.deviceTypeId = this.alarmDetail.data.deviceTypeId
      this.reasonDeviceListLoading = true
      getReasonDevice(this.searchDeviceMap).then(res => {
        if (200 === res.code) {
          this.reasonDeviceList = res.rows
          this.reasonDeviceListLoading = false
        }
      })
    },
    /**根据紧急度渲染图片 */
    formatUrgency (urgency) {
      return formatUrgency(urgency)
    },
    /**查询单选框数据 */
    async getOption () {
      const alarmReasonType = await getDicts('alarm_reason_type')
      const alarmType = await getDicts('alarm_type')
      const handleAlarmReasonType = await getDicts('handle_alarm_reason')
      this.initOption(alarmReasonType.data, 'reason')
      this.initOption(alarmType.data, 'alarm')
      this.initOption(handleAlarmReasonType.data, 'handleReason')
    },
    /**初始化单选框 */
    initOption (data, type) {
      if (type === 'reason') {
        this.alarmReasonModelConfig.forEach(item => {
          if (item.prop === 'alarmType') {
            item.options = data.map((d) => ({
              label: d.dictLabel,
              value: d.dictValue
            }))
          }
        })
      } else if (type === 'alarm') {
        this.alarmReasonModelConfig.forEach(item => {
          if (item.prop === 'alarmStatus') {
            item.options = data.map((d) => ({
              label: d.dictLabel,
              value: d.dictValue
            }))
          }
        })
      } else {
        this.alarmReasonModelConfig.forEach(item => {
          if (item.prop === 'handleAlarmReason') {
            item.options = data.map((d) => ({
              label: d.dictLabel,
              value: d.dictValue
            }))
          }
        })
      }
    },
    /**点击重新处理 */
    clickRepace () {
      updateAlarm(this.alarmReasonModel).then(res => {
        if (200 === res.code) {
          this.$message.success('处理成功')
          this.$emit('repace')
        }
      })
    },
    /**点击nav事件 */
    clickNavItem (item) {
      this.currentNavItem = item.component
    },
    /** 点击返回 */
    clickBack () {
      this.$router.back()
    }
  },
  components: {
    FireFighingMap,
    PlaneGraph,
    AlarmImage,
    OperationRecord,
    ContactPerson
  }
}
</script>

<style lang='less' scoped>
@import url("@/common/colors");
@gradient-angle: 270deg;
@gradient-start: rgba(48, 158, 255, 0);
@gradient-end: rgba(48, 158, 255, 0.47);
@transition-duration: 0.5s;

.details-container {
  .content-wrapper {
    flex-direction: column;
    .content-item {
      margin-bottom: 15px;
      height: 100%;
      .content-item__body {
        overflow: auto;
        height: calc(100% - 55px);
      }
    }
  }
  .left-wrapper {
    width: 55%;
    height: 100%;
    margin-right: 40px;
    .basic-info {
      height: 300px;
    }
    .emergency-wisdom {
      display: flex;
      flex-direction: column;
      height: 100%;
      .wisdom-content__body {
        display: flex;
        height: 100%;
        .nav {
          width: 150px;
          margin-right: 15px;
          li {
            display: flex;
            justify-content: center;
            align-items: center;
            transition: background @transition-duration ease;
            cursor: pointer;
            padding: 3px 10px;
            text-align: left;
            &:hover {
              background: linear-gradient(
                @gradient-angle,
                @gradient-start 4%,
                @gradient-end 100%
              );
              background-color: rgba(53, 168, 235, 0.12);
              color: @primary;
            }
            .item-title {
              width: 60px;
            }
          }
          .item-active {
            background: linear-gradient(
              @gradient-angle,
              @gradient-start 4%,
              @gradient-end 100%
            );
            background-color: rgba(53, 168, 235, 0.12);
            color: @primary;
          }
        }
        .wrapper {
          display: flex;
          flex: 1;
          padding: 5px;
          overflow: auto;
        }
      }
    }
  }
  .right-wrapper {
    flex: 1;
    height: 100%;
    .rela-time-video {
      min-height: 300px;
    }
    .alarm-elevance {
      box-sizing: content-box;
      /deep/.el-radio-group {
        line-height: 32px;
      }
      .btn-wrapper {
        display: flex;
        justify-content: flex-end;
      }
    }
  }
}
</style>